<template>
  <div>
    <div class="chart-container">
      <div ref="userChartRef" class="chart"></div>
    </div>
    <div class="chart-container">
      <div ref="orderChartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
    const userChartRef = ref(null);
    const orderChartRef = ref(null);

    onMounted(() => {
      renderUserChart();
      renderOrderChart();
    });

    function renderUserChart() {
      const userChart = echarts.init(userChartRef.value);

      const userStats = {
        Monday: 120,
        Tuesday: 200,
        Wednesday: 150,
        Thursday: 180,
        Friday: 250,
        Saturday: 300,
        Sunday: 280,
      };

      const xAxisData = Object.keys(userStats);
      const yAxisData = Object.values(userStats);

      const option = {
        title: {
          text: '一周用户数据统计',
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
        },
        yAxis: {},
        series: [{
          name: '用户数量',
          type: 'bar',
          data: yAxisData,
        }],
      };

      userChart.setOption(option);
    }

    function renderOrderChart() {
      const orderChart = echarts.init(orderChartRef.value);
      const orderStats = {
        Monday: 50,
        Tuesday: 80,
        Wednesday: 60,
        Thursday: 70,
        Friday: 90,
        Saturday: 120,
        Sunday: 100,
      };

      const xAxisData = Object.keys(orderStats);
      const yAxisData = Object.values(orderStats);

      const option = {
        title: {
          text: '一周订单统计',
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
        },
        yAxis: {},
        series: [{
          name: '订单数量',
          type: 'line',
          data: yAxisData,
        }],
      };
      orderChart.setOption(option);
    }
</script>

<style>
.chart-container {
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 400px;
}
</style>